= НОЅТІМСЕВ © Three ERE 


The Complete 
HTML Cheat Sheet 


—— 8 


+ 
а 


HTML + 


ИА 


Table of Content 


Click or tap to jump to any section; 


о 
© 
© 
о 
e 
о 
9 


Document Summary © 
Document Information 
Document Structure 


Text Formatting 


өөө 


Links 

Images 

Lists (5 
Forms Ф 


© 


Input Type Attribute 


Select Attributes 
Option Attributes 
Tables 

Objects and iFrames 
iFrame Attributes 
Embed Attributes 
HTML5 New Tags 


Collective 


Character Objects 


Introduction 


If you want to be a web developer, it's crucial to be proficient in HTML — the language 
of the internet. A good solution, therefore, is to always have a cheat sheet at hand to 


help you in your most troubling moments. 


You will find a fairly basic yet comprehensive HyperText Markup Language (HTML) 
cheat sheet in this document. 


We will go through each major HTML tag and explain how to use them. This document 
is also a good starting point for people who want to learn HTML, with 


easy-to-understand examples. 


So, let's get started! 


Start your own website with unlimited hosting. 
Use HostingerTutorials Discount Code and 
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Document Summary 


«html» ... </html> «title»? ... </title> 
Specifies that the webpage is written in Contains the title/name of the webpage. You can 
HTML. It appears on the very first and last see this in your web browser's title bar for every 
line of the webpage. It’s mainly used to web page. Search engines use this tag to extract 
show that the page uses HTML5 - the the topic of the webpage, which is quite 
latest language version. Also known as the convenient when ranking relevant search results. 
root element, this tag acts as a parent tag Keep in mind that including this tag in your 


for every other tag used on the page. document is mandatory. 


<head> ... </head> 


Used to specify metadata about the webpage. It 
includes the webpage’s name, its dependencies 
(JS and CSS scripts), font usage, etc. 


>» Example 


<html> 
<head> 


<body? ... </body> 


Everything the user sees on a webpage is written 
inside this tag. It’s a container for all the contents 
of the webpage. 


<title>My First Website</title> 


</head> 
<body> 


</body> 
</html> 


Document Information 


<base> 


Used to specify the base URL of your site. This 
tag makes linking to internal links on your site 
systematized. Remember that this tag can 
only be used once and only in the <head> tag. 


<style> .. </style> 


It can be used as an alternative to an external 
style sheet or complement it. Includes the 
webpage's appearance information. 


«link» 


Used to link to scripts external to the webpage. 
Typically utilized for including stylesheets. 


«meta»? 


Metadata tag for the webpage. It can help 
highlight the page's author, keywords, original 
published date, etc. 


«script? ... </script> 


Used to add code snippets, typically in 
JavaScript, to make a web page dynamic. It can 
also be used to just link to an external script. 


> 


Example 


<html> 


<head> 
<meta charset="utf-8"> 


«base href="http://myfirstwebsite.tld" target="_blank" /> 


<title>My Beautiful Website</title> 
<link rel="stylesheet" href="/css/master.css"> 
<script type="text/javascript"> 


var dummy = O; 
</script> 
</head> 
<body> 


</body> 
</html> 


Document Structure 


<hl-h6> ... </hl-h6> 


Six different variations of writing a heading. 
«hi» has the largest font size, while <h6> 
has the smallest. 


«br» 
A single line break for webpages. It's used 
to write a new line. 


<hr> 


Similar to the <br> tag. In addition to switching 
to the next line, <hr> tag also draws a horizontal 
bar to indicate the end of the section. 


<span> ... </span> 
This tag injects inline elements, like an image, 
icon, or emoticon, without ruining the formatting 
or styling of the page. 

<div> ... </div> 
A web page's content is usually divided into 
blocks specified by the <div> tag. 

<p> р> 


Plain text is placed inside this tag. 


>» Example 


<div> 


<hl>Top 10 Greatest Films</h1> 


<p>These are considered the greatest movies of all time.</p> 


<hr> 


<h2>The Godfather</h2> 


<p>This 1972 classic stars Marlon Brando and Al Pacino.</p> 


</div> 


Text Formatting 


<strong> ... </strong> 
Makes text bold. Used to emphasize 
a word or phrase. 

<em> ... </em> 
Another emphasis tag, but displays 
text in italics. 

<cite> .. </cite> 


A tag for citing the author of a quote. 


<blockquote> ... </blockquote> 


Quotes often go into this tag. Is used 
in tandem with the <cite> tag. 


«qo </q> 


Similar to the above tag, but for shorter quotes. 


«abbr? ... «/abbr^ 


Denotes abbreviations or acronyms. 


«Б 67 
Alternative to the «strong? tag. 
Generates bold text. 
«I? = «uS 
Used to display text in italics but does not 
emphasize it like the <em> tag. 
«ins? ... </ins> 


Denotes text that has been added to the webpage. 


<pre> ... </pre> 


Pre-formatted, monospaced font text laid out, with 
whitespace inside the element, remained intact. 


«address»? ... </address> 


A tag for specifying the author's contact details. 


<dfn> ... </dfn> 


A tag dedicated to mark definitions. 


<code> .. </code> 
Used to display code snippets within 
a paragraph. 

«sup? ... </зир> 


Similar to the «sub? tag, but used to 
write a superscript. Example: ах. 


>» Example 


«sub? ... «/sub? 


Used to write a subscript. It's smaller font just 
below the mid-point of regular fonts. Example: а. 


«small» ... </small> 


Reduces text size. In HTML5, it often refers 
to redundant or invalid information. 


<p>Here's <strong>some bold text</strong> and heres <em>some text in 
italics</em> compared to regular text.</p> 


<blockquote> 


Anyone who has never made a mistake has never tried anything new. 


<cite>- Albert Einstein</cite> 
</blockquote> 


<pre> 


Here's what pre-formatted text looks like. 


</pre> 


<p>A code snippet example: <code>Three. Two. Online</code></p> 


Links 


<a href="mailto:"> ... </a> 


A tag dedicated to sending emails. 


<a href="#name'’> ... </a> 


A variation of the <aname="name’> tag. 
Used to navigate to the web page's <div> 
section only. 


«a hrefz"» .. </a> 


An anchor tag. Primarily used to include hyperlinks. 


<a href="tel://H#H#-##F#'> ... </a> 


An anchor tag for mentioning contact numbers. 
The numbers are clickable, which can be 
particularly beneficial for mobile users. 


Images 


«img? 


A tag to display images on a web page. 


alt="text" 


A text is displayed when the user hovers 
the mouse over an image. It can be used to 
give additional details about the image. 


border= 


Specifies the border thickness of the image. 
If not mentioned, the default value is O. 


width=" 


Specifies image width in pixels or percentages. 


shape= 


The shape of an area. 


«map name=""> ... </map> 


Name of the map associated between 
an image and a map. 


> Example 


<area> 


Specifies image map area. 


coords= 


Coordinates vital information about the 
shape. Example: vertices for rectangles, 
center or radius for circles. 


src="url]" 


A URL or path where the image is located 
on your drive or the web. 


height= 


Specifies image height in pixels or percentages. 


«map? ... </map> 


Denotes an interactive (clickable) image. 


align= 


The relative alignment of an image. It can change 
parallel to other elements on a web page. 


«img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Solar_system.jpg" 
width="823" height="1024" alt="The Solar System’ 


usemap="#solarmap'> 


«map name="solarmap"> 


«area shape="circle’ coords="572,322,100" href="solar-system.htm’ alt="The Solar 


System’> 


</map> 


Lists 
<ol> ... </ol> <i> </li> 

A tag for an ordered or numbered list of items. An individual item as part of a list. 
арр «dt^ «/dt» 


Opposed to the «ul» tag. Used for an 
unordered list of items. 


«dl» ... «/dl» 


A tag for a list of items with definitions. 


>» Example 


A definition of a single term that is in-line 
with body content. 


<dd> ... </dd> 


A description of the defined term. 


«ol» 
«li» Monday«4/li» 
«li» Tuesday«/li» 
«li» Wednesday«/li» 
</ol> 
«ul» 
<li>France</li> 
<li>Germany</li> 
<li>Italy</li> 
</ul> 
«gl» 
<dt>Toyota</dt> 
<dd>A Japanese car brand</dd> 
<dt>Armani</dt> 
<dd>An Italian fashion brand</dd> 
</dl> 
Forms 


«form? ... </form> 


A parent tag for an HTML form. 


action="url' 


Where the form data will be submitted once the user fills it. 


method= 


Specifies which HTTP method (POST or 
GET) will be used to submit the form. 


autocomplete 
Determines if the form has 
auto-complete enabled. 
accept-charsets 
Determines character encodings 
when a form is submitted. 


<fieldset> ... </fieldset> 


Identifies groups of all fields on the form. 


<input> 


Used to take input from the user. The input type 
is determined by a number of attributes. 


Input Type Attribute 


type= 


Determines which type of input (text, dates, 
password) is requested from the user. 


name= 


Specifies the name of the input field. 


value= 
Specifies the value currently contained 
in the input field. 

width=" 


Determines the width of the input element 
in pixel values. 


enctype= 
Used only for the POST method. It dictates the 
data encoding scheme when a form is submitted. 
novalidate 
Determines whether a form should be 
validated before submission. 
<label> ... </label> 


Used to label a field in the form. 


<legend> ... </legend> 


Operates as a caption for the <fieldset> element. 


target 


After submission, the form response will be 
displayed wherever this refers to. Usually has the 
following values: _blank, _self, _parent, _top. 


size= 


Determines the input element width 
(number of characters). 


maxlength= 


Specifies the most input field characters allowed. 


required 


Makes an input field compulsory. The form cannot 
be submitted if a required field is left empty. 


height= 


Determines the height of the input element in 
pixel values. 


placeholder=" 


This tag can be used to provide a hint to the 
user about the nature of the requested data. 


min= 
The minimum value allowed for an 
<input> element. 

autofocus 
Forces focus on the input element when a 
web page loads completely. 

<textarea> ... </textarea> 


Applied for longer strings of input. It can be used 
to get a multi-sentence text from the user. 


Select Attributes 


name= 


А name for a particular list of options. 


multiple 


States if the user can choose multiple 
options from the list. 


autofocus 


Specifies that a drop-down list will automatically 
come into focus after the page loads. 


Option Attributes 


value= 


A text visible to the user for any given option. 


pattern= 


Specifies a regular expression that can be 
used to look for patterns in the user's text. 


max- 
The maximum value allowed for an 
«input? element. 
disabled 
Disables an input element. The user can no 
longer enter data. 
«select? .. </select> 


Specifies a list of options that the user 
can choose from. 


size- 


A total number of options given to the user. 


required 
Specifies if choosing an option(s) is necessary 
for form submission. 

«option? .. </option> 


A tag for listing individual items on the list of 
options. 


selected 


Determines which option is selected by 
default when a form loads. 


«button? ... </button> 


Tag for creating a button for form submission. 


>» Example 


«form actionz'form, submit.php' method="post"> 


<fieldset> 


<legend>Bio:</legend> 


First name:<br> 


<input type="text" name='first-name’ value="John" 


placeholder="Please enter your first name here'»«br? 


Last name:<br> 


<input type="text" name="last-name’ value="Doe" 


placeholder="Please enter your last name here"><br><br> 


Favorite sport:<br> 


<select> 


<option value="basketball">Basketball</option> 
<option value="soccer">Soccer</option> 


<option value="tennis'>Tennis</option> 


</select> 


«textarea name="description’></textarea> 


<input type="submit" value="Submit"> 


</fieldset> 
</form> 


Tables 


<table> ... </table> 


Marks a table on a webpage. 


<tfoot> ... </tfoot> 


Determines the footer of a table. 


etr» etr 


Denotes a single row in a table. 


«caption? ... </caption> 


A description of a table is placed inside this tag. 


<tbody> ... </tbody> 


The body of a table where the data is held. 


<thead> ... </thead> 


Specifies information about specific columns of a table. 
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Ti 


«ta» </ the <td> </td> 
The value of a heading of a table’s column. A single cell of a table. Contains the actual value/data. 
«colgroup? ... </colgroup> «col» 
Used for grouping columns together. Denotes a column inside a table. 
>» Example 
<table> 
<colgroup> 
<col span="2"> 
«col» 
</colgroup> 
<tr> 
<th>Name</th> 
<th>Major</th> 
<th>GPA</th> 
</tr> 
<tr> 
<td>Bob</td> 
<td>Law</td> 
<td>3:55</td> 
</tr> 
<tr> 


<td>Alice</td> 
<td>Medicine</td> 
<td>3.61</td> 
</tr> 
</table> 


Objects and iFrames 


<object> ... </object> «iframe» .. </iframe> 
Used to embed an additional multimedia An inline block of content. It'S used as a container for 
object into a web page. This can be an multimedia objects in a flexible manner. It floats inside a web 


audio/video file, document (.pdf), etc. page, meaning it's placed relative to other webpage items. 


height- widthz" 
Determines object height in pixel values. Determines object width in pixel values. 
type=" 
The type/format of the object's contents. 
iFrame Attributes 
пате="" srcdoc-" 
The name of an iFrame. Any HTML content to be displayed inside an iFrame. 
src=" <param /> 
The source URL/path of the multimedia Used for iFrame customization. This includes 
object to be held inside an iFrame. additional parameters to go along with the content. 
height=" width=" 
Determines the height of an iFrame. Determines the width of an iFrame. 
<embed) ... </embed> 
Used to embed external objects, such as plugins. 
Embed Attributes 
height=" width=" 
Determines the height of an embedded item. Determines the width of an embedded item. 
src=" type-" 


The URL/path of an embedded item. The type or format of an embedded content. 


>» Example 


<object width="1000" height="1000"></object> 
<iframe src="other-web-page.html” width="500" height="500"></iframe> 
<embed srcz'video-file.swf" width="500" height="500"></embed> 


HTML5 New Tags 


«header? ... «/header? 
Specifies the webpage header. It can also 
be used for objects inside the web page. 
«main? ... </main> 


Marks the main content of a web page. 


<aside> ... </aside> 
Denotes content displayed in 
a sidebar of a web page. 
«figure» ... </figure> 
A tag reserved for figures (diagrams, 
charts) in HTML5. 
«dialog? ... </dialog> 


Used to create a dialog box. 


<figcaption> ... </figcaption> 


A description of the figure is placed inside. 


«nav? ... </nav> 


Navigation links for the user in a web page. 


«meter? ... </meter> 


Measures data within a given range. 


<footer> ... </footer> 
Specifies the webpage footer. It can also be 
used for objects inside the web page. 
«article»? .. </article> 


Denotes an article. 


«details? ... </details> 
Used for additional information. The user 
has the option to view or hide these details. 
<summary? ... </summary> 
Used as a heading for the <details> tag. 
It's always visible to the user. 
«section? .. </section> 


Specifies a particular section in a webpage. 


«marl ... </mark> 


Used to highlight a particular portion of a text. 


«menuitem»? ... </menuitem> 


A particular item from a list or menu. 


<progress> ... </progress> 


Typically used as a progress bar. This is used 
to track progress. 
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Тр </rp> «ruby? ... </ruby> 
Shows text for web browsers without Describes a Ruby annotation for East 
Ruby annotation support. Asian typography. 
то тр «time»? ... </time> 
Displays East Asian typography character details. A tag for formatting date and time. 
<wbr> 


A line-break within the content. 


Collective Character Objects 


&#34; &quot; &#38; &amp; &#6EO; &lt; &#62; &gt; 
Quotation Marks (“) Ampersand (&) Less than sign (<) Greater than sign (>) 
&#160; &nbsp; &#169; &copy; &#64; &Uuml; &#149; &ouml; 

Non-breaking space ( ) Copyright symbol (©) @ Symbol (@) Small bullet (e°) 


&#153; &ucirc; 


Trademark symbol (™) 


